<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
	* {margin: 0;padding: 0;}	
	#ul1 { width: 400px; height: 400px; border: 1px solid black; margin: 10px auto; overflow: hidden;}
	#ul1 li {border-bottom: 1px #999 dashed; padding: 4px; list-style: none; overflow: hidden; filter: alpha(opacity: 0); opacity: 0;}
</style>
<script src="MoveFrameWork2.js"></script>
<script>
window.onload = function()
{
	var oBtn = document.getElementById('btn1');
	var oUl = document.getElementById('ul1');
	var oTxt = document.getElementById('txt1');
	
	oBtn.onclick = function()
	{
		var oLi = document.createElement('li');
		
		oLi.innerHTML = oTxt.value;
		oTxt.value='';
		//oul.appendChild
		if(oUl.children.length>0)
		{
				oUl.insertBefore(oLi,oUl.children[0]);
		}else{
				oUl.appendChild(oLi);
		}
		
		//运动
		var iHeight = oLi.offsetHeight;
		oLi.style.height='0';
		
		startMove(oLi,{height: iHeight},function(){ startMove(oLi,{opacity:100});});
	};
	
};
</script>
</head>

<body>
<textarea name="" id="txt1" cols="30" rows="4"></textarea>
<input type="button" id="btn1" value="发布">
<ul id="ul1">
	
</ul>
</body>
</html>
